<template>
  <div class="app-container">
    <div class="inquire-header">
      <div class="input-list">
        <div class="flex gap-1 mb-4" style="align-items: center">
          <span class="list-name">公司名称：</span>
          <el-input v-model="input1" style="width: 240px" placeholder="请输入" />
        </div>
        <!-- <div class="flex gap-1 mb-4" style="align-items: center; margin-left: 115px">
          <span class="list-name">状态：</span>
          <el-input v-model="input2" style="width: 240px" placeholder="请输入" />
        </div> -->
      </div>
      <div class="list-btn">
        <div class="btn-reset" @click="resetSearch">重置</div>
        <!-- <div class="btn-reset" :class="{ active: activeBtn === 'search' }" @click="searchData">查询</div> -->
      </div>
    </div>
    <div class="inquire-container">
      <div class="inquire-item-header">
        <div class="section">已有部门</div>
        <div class="flex gap-1 input-btn" @click="handleAdded">
          <el-icon><Plus /></el-icon>
          <span>新增</span>
        </div>
      </div>
      <div class="covered-table">
        <el-table
          :data="paginatedFilteredData"
          style="width: 100%"
          class="topsoil-tab"
          @selection-change="handleSelectionChange"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column type="selection" width="30" />
          <el-table-column prop="id" label="公司服务ID" align="center" />
          <el-table-column prop="name" label="公司服务名称" align="center" />
          <el-table-column prop="num" label="公司服务人数" align="center" />
          <el-table-column prop="person" label="负责人" align="center" />
          <el-table-column prop="telephone" label="联系电话" align="center" />
          <el-table-column prop="date" label="创建时间" align="center" sortable />
          <el-table-column prop="" label="操作" align="center">
            <template #default="scope">
              <el-button size="small" @click="handleDetails(scope.row)">详情</el-button>
              <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[9, 18, 27]"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 预览弹窗 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="25%">
          <div v-if="dialogMode === 'details'" class="details-content">
            <!-- 详情内容展示 -->
            <div class="details-item">
              <div class="details-text">公司服务</div>
              <div>{{ currentRow.name }}</div>
            </div>
            <div class="details-item">
              <div class="details-text">公司服务ID</div>
              <div>{{ currentRow.id }}</div>
            </div>
            <div class="details-item">
              <div class="details-text">单位负责人</div>
              <div>{{ currentRow.person }}</div>
            </div>
            <div class="details-item">
              <div class="details-text">创建时间</div>
              <div>{{ currentRow.date }}</div>
            </div>
            <div class="details-item">
              <div class="details-text">联系电话</div>
              <div>{{ currentRow.telephone }}</div>
            </div>
            <div class="details-item">
              <div class="details-text">单位描述</div>
              <el-input
                v-model="currentRow.description"
                style="width: 360px"
                :rows="3"
                type="textarea"
                placeholder="这是一段文字描述"
              />
            </div>
          </div>
          <div v-if="dialogMode === 'edit'">
            <!-- 修改内容展示 (可替换为实际的表单) -->
            <el-form
              :model="currentRow"
              :rules="rules"
              ref="currentRowForm"
              label-width="auto"
              style="max-width: 600px"
            >
              <el-form-item label="公司服务名称">
                <el-input v-model="currentRow.name" />
              </el-form-item>
              <el-form-item label="单位ID">
                <el-input v-model="currentRow.id" />
              </el-form-item>
              <el-form-item label="单位负责人">
                <el-input v-model="currentRow.person" />
              </el-form-item>
              <el-form-item label="添加时间">
                <el-date-picker
                  v-model="currentRow.date"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择开始时间"
                />
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="currentRow.telephone" />
              </el-form-item>
              <el-form-item label="单位描述">
                <el-input v-model="currentRow.description" type="textarea" />
              </el-form-item>
            </el-form>
          </div>
          <div v-if="dialogMode === 'added'">
            <!-- 修改内容展示 (可替换为实际的表单) -->
            <el-form
              :model="currentRow"
              :rules="rules"
              ref="currentRowForm"
              label-width="auto"
              style="max-width: 600px"
            >
              <el-form-item label="公司服务名称">
                <el-input v-model="currentRow.name" />
              </el-form-item>
              <el-form-item label="单位ID">
                <el-input v-model="currentRow.id" />
              </el-form-item>
              <el-form-item label="单位负责人">
                <el-input v-model="currentRow.person" />
              </el-form-item>
              <el-form-item label="添加时间">
                <el-date-picker
                  v-model="currentRow.date"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择开始时间"
                />
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="currentRow.telephone" />
              </el-form-item>
              <el-form-item label="单位描述">
                <el-input v-model="currentRow.description" type="textarea" />
              </el-form-item>
            </el-form>
          </div>
          <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button @click="handleSave">确认</el-button>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, Ref, onMounted } from "vue"
interface User {
  id: string
  name: string
  num: number
  person: string
  telephone: string
  date: string
}
const input1 = ref("")

// 追踪激活的按钮
const activeBtn = ref<string>("")

const tableData: Ref<User[]> = ref([
  {
    id: "82:81:62:E8:96:41",
    name: "上海荣泰健康科技股份有限公司",
    num: 2624,
    person: "张三",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "FC:EC:16:B8:22:2D",
    name: "联合航空",
    num: 2719,
    person: "钱萌",
    telephone: "15234613136",
    date: "2024-09-21 08:52:22",
    description: ""
  },
  {
    id: "A9:C3:62:CB:97:C2",
    name: "日立电梯(盈顺路)",
    num: 2490,
    person: "钱珍多",
    telephone: "18101289730",
    date: "2024-09-17 15:42:08",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "上海新农饲料股份有限公司",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "陶氏化学(中国)有限公司",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "中国石化上海工程",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "中国化学工程第三建设有限公司",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "上海电气(四川中路)",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "百事食品(中国)有限公司",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  },
  {
    id: "82:81:62:E8:96:41",
    name: "百事食品(中国)有限公司",
    num: 2724,
    person: "钱佳益",
    telephone: "13582615818",
    date: "2024-09-21 09:52:38",
    description: ""
  }
])

const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
// 重置查询
const resetSearch = () => {
  input1.value = ""
  currentPage.value = 1
  activeBtn.value = "reset"
}

// 分页相关的状态
const currentPage = ref(1) // 当前页码
const pageSize = ref(9) // 每页显示条目数

// 根据输入框的内容筛选表格数据
const filteredData = computed(() => {
  const query = input1.value.trim().toLowerCase() // 将输入值转换为小写
  if (!query) {
    return tableData.value // 如果没有输入查询条件，返回全部数据
  }
  return tableData.value.filter((item) => item.name.toLowerCase().includes(query))
})
// 根据分页展示过滤后的数据
const paginatedFilteredData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredData.value.slice(start, end)
})
// 处理分页变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
}
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}

// 验证规则
const rules = reactive({
  name: [{ required: true, message: "公司服务名称不能为空", trigger: "blur" }],
  id: [{ required: true, message: "单位ID不能为空", trigger: "blur" }],
  person: [{ required: true, message: "单位负责人不能为空", trigger: "blur" }],
  date: [{ required: true, message: "添加时间不能为空", trigger: "blur" }],
  telephone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }]
})
// 引用表单实例
const currentRowForm = ref(null)
const dialogVisible = ref(false) // 控制弹窗是否可见
const dialogTitle = ref("") // 弹窗标题
const dialogMode = ref("") // 弹窗模式，'details' 或 'edit'
const currentRow = ref<any>({}) // 当前选中的行数据
//点击新增按钮
const handleAdded = (row: any) => {
  currentRow.value = {
    id: "", // 新增时 ID 可以留空
    name: "",
    num: 0, // 根据需要设置默认值
    person: "",
    telephone: "",
    date: "",
    description: ""
  }
  currentRow.value = { ...row } // 深拷贝当前行的数据
  dialogMode.value = "added" // 设置弹窗模式为详情
  dialogTitle.value = "新增" // 设置弹窗标题
  dialogVisible.value = true // 显示弹窗
}

// 点击详情按钮，显示详情弹窗
const handleDetails = (row: any) => {
  currentRow.value = { ...row } // 深拷贝当前行的数据
  dialogMode.value = "details" // 设置弹窗模式为详情
  dialogTitle.value = "单位管理详情" // 设置弹窗标题
  dialogVisible.value = true // 显示弹窗
}

// 点击修改按钮，显示修改弹窗
const handleEdit = (row: any) => {
  currentRow.value = { ...row } // 深拷贝当前行的数据
  dialogMode.value = "edit" // 设置弹窗模式为修改
  dialogTitle.value = "单位管理修改" // 设置弹窗标题
  dialogVisible.value = true // 显示弹窗
}

// 保存操作
const handleSave = () => {
  if (dialogMode.value === "added") {
    // 添加新数据
    tableData.value.push({
      ...currentRow.value,
      // 确保新数据有唯一的 ID
      id: `new-${Date.now()}`, // 或者使用其他生成 ID 的方法
      date: new Date().toISOString().slice(0, 19).replace("T", " ") // 当前时间
    })
  } else if (dialogMode.value === "edit") {
    // 修改现有数据
    const index = tableData.value.findIndex((item) => item.id === currentRow.value.id)
    if (index !== -1) {
      tableData.value[index] = { ...currentRow.value } // 更新数据
    }
  }

  dialogVisible.value = false // 关闭弹窗
}
onMounted(() => {
  // window.location.reload()
})
</script>
<style lang="scss" scoped>
@import "@/styles/global.scss";
.app-container {
  width: 100%;
  height: 100%;

  .inquire-header {
    width: 100%;
    height: 78px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #e4e4e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 23px;
    .input-list {
      display: flex;
      align-items: center;
      margin-top: 16px;
      .list-name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85) !important;
      }
    }
    .list-btn {
      // width: 140px;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
      cursor: pointer;

      .btn-reset {
        width: 64px;
        height: 31px;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 31px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
      }
      .btn-reset:hover {
        background-color: #059669; // 激活状态背景颜色
        color: #fff; // 激活状态的字体颜色
      }

      .active {
        background-color: #059669; // 激活状态背景颜色
        color: #fff; // 激活状态的字体颜色
      }
    }
  }
  .inquire-container {
    width: 100%;
    height: 91%;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    margin: 16px 0 20px 0;
    padding: 20px 23px;
    .inquire-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .section {
      font-family: AlibabaPuHuiTi20;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
    }
    .input-btn {
      width: 82px;
      height: 32px;
      background: #059669;
      border-radius: 0px 0px 0px 0px;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      span {
        margin-left: 4px;
      }
    }
  }
  .covered-table {
    width: 100%;
    position: relative;
    .demo-pagination-block {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }
    .details-content {
      height: 330px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 10px;
      .details-item {
        display: flex;
        .details-text {
          width: 100px;
          text-align: right;
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
